<template>
  <div class="mt-6 max-width">
    <v-card-title class="justify-space-between">
      <div class="subtitle-1">
        <v-icon small color="blue darken-2">mdi-message-settings-outline</v-icon>
        最新留言
      </div>
      <div>
        <v-tooltip top>
          <template v-slot:activator="{ on }">
            <v-btn text v-on="on">
              <v-icon small color="blue darken-2" @click="openMessageBoard">mdi-dots-horizontal</v-icon>
            </v-btn>
          </template>
          <span>所有留言</span>
        </v-tooltip>
      </div>
    </v-card-title>

    <v-list three-line dense>
      <template v-for="(item, index) in recentlyMessages">
        <v-list-item
          :key="index"
        >
          <v-list-item-avatar>
            <v-img
              v-if="item.avatar ===null || item.avatar === undefined"
              src="http://119.23.10.3:8018/group1/M00/00/00/rBIUS1-BXsOAeA1jAAAhIDW5dXQ408.jpg"
            />
            <v-img v-else :src="item.avatar" />
          </v-list-item-avatar>

          <v-list-item-content>
            <v-list-item-title class="text-left" v-html="item.content" />
            <v-list-item-subtitle class="text-right">{{ item.netName }}   {{ item.createTime | dateformat('YYYY-MM-DD HH:mm:ss') }}</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
        <v-divider :inset="inset" />
      </template>
    </v-list>
  </div>
</template>

<script>
import '@/assets/css/business/blog/board/board.scss'
import { getRecentlyMessages } from '@/api/messageboard'

export default {
  name: 'BulletinBoard',
  data: () => ({
    inset: true,
    recentlyMessages: []
  }),
  created() {
    this.getTop5Messages()
  },
  methods: {
    getTop5Messages() {
      // 直接请求后台
      getRecentlyMessages()
        .then((res) => {
          const resultData = res.data
          if (res && res.code === 200) {
            this.recentlyMessages = []
            this.recentlyMessages.push(...resultData)
          }
        })
        .catch(err => {
          this.$iziToast.error({ message: err.message })
        })
    },
    openMessageBoard() {
      // console.log("准备跳转");
      this.$go('/messageBoard')
    }
  }
}
</script>

<style scoped>

</style>
